<!--单位添加-->
<template>
    <div class="vue-ms-main  vue-ms-main-add" v-loading="loading">
        <div class="ms-top">
            <!-- 当前页标题  -->
            <div class="crumbs fl">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="el-icon-menu"></i><a @click="$router.push('/proAll')">  公司管理</a> </el-breadcrumb-item>
                    <el-breadcrumb-item v-if="ruleForm.id != 0">公司编辑</el-breadcrumb-item>
                    <el-breadcrumb-item v-if="ruleForm.id == 0">公司添加</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!--  添加 -->
        <div class = "ms-updmain">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div class="info infos">
                    <div class="fl upd-model" prop="userName">
                        <el-form-item label="公司名称" prop="projectName" ><i class="xing">*</i>
                            <el-input type="text" v-model="ruleForm.projectName"  :rules="[{ required: true},]" placeholder="请填写项目名称" auto-complete="on"></el-input>
                        </el-form-item>
                        <el-form-item label="公司城市" prop="comcity"><i class="xing">*</i>
                            <el-cascader  placeholder="请选择公司城市"  change-on-select  clearable :options="options2" v-model="ruleForm.comcity"  @change="handleChange"></el-cascader>
                        </el-form-item>
                        <el-form-item label="合同号" prop="hetonghao"><i class="xing">*</i>
                            <el-input type="text" v-model="ruleForm.hetonghao"  :rules="[{ required: true},]" placeholder="请填写合同号" auto-complete="on"></el-input>
                        </el-form-item>
                        <el-form-item v-if="isCz">
                            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>

    </div>
</template>

<script>
    import insurance from '../../api/insurance';
    export default {
        data() {
            var checkProName = (rule, value, callback) => {if (!value) { return callback(new Error('请输入项目名称'));}else{callback(); }};
            var checkComcity = (rule, value, callback) => {if (!value) { return callback(new Error('请选择城市'));}else{callback(); }};
            return {
                isCz: true,
                options: [],
                paramsId: '',
                paramsRouter: 'proAll',
                ruleForm: {
                    comname: '',
                    comcity:'',
                    province: '',
                    city: '',
                    area: '',
                    hetonghao:'',
                },
                // 验证
                rules: {
                    projectName: [
                        {validator: checkProName, trigger: 'blur'}
                    ],
                    comcity:[
                        {validator: checkComcity, trigger: 'blur'}
                    ]
                },
                options2: [{
                    value: 'zhinan',
                    label: '指南',
                    children: [{
                        value: 'shejiyuanze',
                        label: '设计原则',
                        children: [{
                            value: 'yizhi',
                            label: '一致'
                        }, {
                            value: 'fankui',
                            label: '反馈'
                        }, {
                            value: 'xiaolv',
                            label: '效率'
                        }, {
                            value: 'kekong',
                            label: '可控'
                        }]
                    }, {
                        value: 'daohang',
                        label: '导航',
                        children: [{
                            value: 'cexiangdaohang',
                            label: '侧向导航'
                        }, {
                            value: 'dingbudaohang',
                            label: '顶部导航'
                        }]
                    }]
                }, {
                    value: 'zujian',
                    label: '组件',
                    children: [{
                        value: 'basic',
                        label: 'Basic',
                        children: [{
                            value: 'layout',
                            label: 'Layout 布局'
                        }, {
                            value: 'color',
                            label: 'Color 色彩'
                        }, {
                            value: 'typography',
                            label: 'Typography 字体'
                        }, {
                            value: 'icon',
                            label: 'Icon 图标'
                        }, {
                            value: 'button',
                            label: 'Button 按钮'
                        }]
                    }, {
                        value: 'form',
                        label: 'Form',
                        children: [{
                            value: 'radio',
                            label: 'Radio 单选框'
                        }]
                    }, {
                        value: 'data',
                        label: 'Data',
                        children: [{
                            value: 'table',
                            label: 'Table 表格'
                        }, {
                            value: 'tag',
                            label: 'Tag 标签'
                        }, {
                            value: 'progress',
                            label: 'Progress 进度条'
                        }]
                    }, {
                        value: 'notice',
                        label: 'Notice',
                        children: [{
                            value: 'alert',
                            label: 'Alert 警告'
                        }]
                    }, {
                        value: 'navigation',
                        label: 'Navigation',
                        children: [{
                            value: 'menu',
                            label: 'NavMenu 导航菜单'
                        }, {
                            value: 'tabs',
                            label: 'Tabs 标签页'
                        }]
                    }, {
                        value: 'others',
                        label: 'Others',
                        children: [{
                            value: 'dialog',
                            label: 'Dialog 对话框'
                        }, {
                            value: 'tooltip',
                            label: 'Tooltip 文字提示'
                        }]
                    }]
                }, {
                    value: 'ziyuan',
                    label: '资源',
                    children: [{
                        value: 'axure',
                        label: 'Axure Components'
                    }]
                }],

                loading: false,
            }
        },
        watch: {
            '$route': 'getParams'
        },
        methods: {
            // 城市选择
            handleChange(value) {
                console.log(value);
            },
            submitForm(formName) {
                var that = this;

                // if(that.paramsRouter == undefined){
                //     that.paramsRouter = 'proAll';
                // }
                console.log(that.paramsRouter+'------------------------');
                that.$refs[formName].validate((valid) => {
                    if (valid) {
                        that.addLoading = true;
                        let para = Object.assign({}, that.ruleForm);
                        if(parseFloat(para.progress)>1){
                            para.progress = 1;
                        }
                        if(para.hookURL == ''){
                            // para.hookURL = 'https://oapi.dingtalk.com/robot/send?access_token=cf8e62030685637f33e614b77b6156c93903feeb1d73833a93bf9d0ff1bf34ac'; // 测试群
                            para.hookURL = 'https://oapi.dingtalk.com/robot/send?access_token=bd78cea6877351342291b3a5995953d61ca1de366e8dfce74c92ca1ce568424e';    // 国朗群
                        }
                        var start = new Date(that.ruleForm.start_date);
                        var end = new Date(that.ruleForm.end_date);
                        if((end - start) < 0){
                            that.altopen('时间错误！','warning');
                        }else{
                            var duration = Math.floor((end-start)/(24*3600*1000))*24;
                            para.progress =  (Math.round(parseFloat(para.progress) * 100))/100;
                            var data =JSON.stringify({
                                "ID": parseInt(para.id),
                                "projectName":para.projectName,
                                "text":para.text,
                                "Location":para.Location,
                                "type":'0',
                                "start_date":this.formatData(para.start_date),
                                "end_date":this.formatData(para.end_date),
                                "duration":parseInt(para.duration),
                                "progress":(that.ruleForm.progress/100).toString(),
                                "owner_id":parseInt(para.owner_id),
                                "parent":parseInt(para.parent),
                                "hookURL":para.hookURL,     // 关联url
                                "priority":parseInt(para.priority),
                                "tester":parseInt(para.tester),     // 测试人员
                                "operator":parseInt(JSON.parse(sessionStorage.getItem('user')).id)  // 登录人员
                            });
                            $.ajax(insurance.posturl+"proj/StorgeProj",{
                                'data': data,
                                headers: {'Content-Type': 'application/json;charset=UTF-8'},
                                'type': 'POST',
                                success:function (res) {
                                    res = JSON.parse(res);
                                    if(res.isSuccess === false){
                                        if(para.id == 0){
                                            that.altopen('添加'+res.msg,'success');
                                        }else{
                                            that.altopen('修改'+res.msg,'success');
                                        }
                                    }else{
                                        if(para.id == 0){
                                            that.altopen('添加'+res.msg,'success');
                                        }else{
                                            that.altopen('修改'+res.msg,'success');
                                        }
                                        that.addFormVisible = false;
                                        that.$router.push({ path: '/'+that.paramsRouter });
                                    }
                                    that.addLoading = false;
                                }
                            });
                            // this.loading = true;
                        }
                    } else {
                        this.altopen('请把信息填写完整！','warning');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.initDay();
                // this.$refs[formName].resetFields();
            },
            // 公共弹框
            altopen(msg,type) {
                this.$notify({
                    type:type,
                    message: msg,
                    offset: 100,
                });
            },
            // 添加按钮
            addBtn(){
                this.isCz = true;
                var t = new Date;
                this.ruleForm = {

                };
            },
            // 修改页面传值
            getProList () {
                this.paramsId = this.$route.query.ID;
                this.paramsRouter = this.$route.query.routers;
                var that = this;
                if(that.paramsId != undefined && that.paramsId  > 0){
                    that.loading = true;
                    $.ajax(insurance.posturl+"proj/projInfo?projID="+that.paramsId,{
                        headers: {'Content-Type': 'application/json;charset=UTF-8'},
                        'type': 'GET',
                        success:function (res) {
                            res = JSON.parse(JSON.parse(res).Content)[0];
                            that.ruleForm = res;
                            that.loading = false;
                        }
                    });
                }else{
                 that.addBtn();
                }
            },

            // 初始化数据
            initDay(){
                this.getProList();// 修改页面接受值
            },
        },

        mounted(){
            this.initDay();
        }
    }
</script>
<style>
    .el-form-item__content{position: relative};

    .xing{color: red; font-size: 20px; position: absolute;left: -75px; top: 7px;}
    .img-upd-div{height: 134px; width: 225px; float:left; overflow: hidden;border: #ccc 1px solid;margin-bottom: 5px; margin-right: 5px; position: relative}
    .img-upd-div .el-form-item__error{ position: absolute; bottom: 0px;  text-align: center; left: 0px; width: 100%;}
    .image-list2 .img-uplod{
        position: absolute;
        z-index: 999;
        background: transparent;
        top: -24px;
        width: 100%;
        height: 160px !important;
        color: #fff;
    }

</style>
